<template>
  <div class="recommend">
    <div class="recommend-wrap">
      <div class="recommend-crizy">
        <div class="recommend-crizy-time">
          <div>
            <van-icon name="cart-o" />
            <span>近一小时疯抢</span>
          </div>
          <div>
            <span>8.8</span>
            万人+正在抢
          </div>
        </div>
        <div class="recommend-crizy-container">
          <div
            class="recommend-crizy-wrap"
            v-for="niceList in niceLists"
            :key="niceList.id"
          >
            <div class="recommend-crizy-img">
              <img :src="niceList.pic" alt="" />
              <span class="recommend-crizy-msg" v-if="niceList.special">{{
                niceList.special
              }}</span>
            </div>
            <div class="recommend-crizy-num">
              疯抢
              <span class="num">{{
                (niceList.sellNum =
                  niceList.sellNum > 10000
                    ? niceList.sellNum.toFixed(1) + "万"
                    : niceList.sellNum)
              }}</span>
              件
            </div>
            <div class="recommend-crizy-title">{{ niceList.dtitle }}</div>
            <div class="recommend-crizy-price">
              <span class="price-log">￥</span>
              <span class="new-price">{{ niceList.jiage }}</span>
              <span class="old-price">￥ {{ niceList.yuanjia }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="recommend-choiceness">
        <div class="recommend-choiceness-title"></div>
        <GoodList />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted } from "vue";
import { useStore } from "vuex";
import GoodList from "./index.vue";
export default defineComponent({
  setup() {
    const store = useStore();

    const niceLists = computed(() => {
      return store.state.postAge.niceLists;
    });

    return { niceLists };
  },
  components: {
    GoodList,
  },
});
</script>
<style lang="stylus" scoped>
.recommend-choiceness
    width 100%
    height 100%
    margin-top -.3rem
    background #F5F5F5
    overflow hidden
    .recommend-choiceness-title
        width .83rem
        height .35rem
        background url(https://cmsstatic.ffquan.cn/dist/static/foryou.012aad09.png) no-repeat 50%
        background-size 100%
        margin 1.2rem auto .1rem

.recommend
    margin-top -.01rem
    width 100%
    height 100%
    padding-bottom .5rem
    .recommend-crizy
        position relative
        font-size .13rem
        padding .2rem .1rem 0 .1rem
        height 1.2rem
        background linear-gradient(90deg, rgb(255, 160, 51) 0%, rgb(255, 128, 48) 100%) 0% 0% / 100%
        color #fff
        border-radius 0 0 20% 20%
        .recommend-crizy-time
            display flex
            justify-content space-between
        .recommend-crizy-container
            left 0
            position absolute
            padding 0 .1rem
            display flex
            margin-top .14rem
            flex-wrap nowrap
            overflow auto
            width 100%
            .recommend-crizy-wrap
                width 1.1rem
                background #fff
                border-radius .08rem .08rem
                margin-right .05rem
                .recommend-crizy-img
                    position relative
                    display flex
                    color #cc600e
                    img
                        width 1rem
                        height 1rem
                        display block
                        margin .05rem auto
                    .recommend-crizy-msg
                        font-size .1rem
                        position absolute
                        right 0
                        top .04rem
                        height .14rem
                        padding 0 .05rem
                        background linear-gradient(90deg,#ffedc9,#ffe3af)
                        transform scale(.8)
                .recommend-crizy-num
                    width .86rem
                    height .18rem
                    background linear-gradient(270deg,#ffbe50,#ff570c)
                    border-radius .18rem
                    text-align center
                    font-size .11rem
                    margin 0 auto
                .recommend-crizy-title
                    margin .03rem 0
                    color #333
                    font-size .11rem
                    max-height .16rem
                    overflow hidden
                    text-overflow ellipsis
                    white-space nowrap
                .recommend-crizy-price
                    .price-log
                        font-size .14rem
                        font-weight: 500
                        color #fe3738
                        margin 0 .02rem 0 .06rem
                    .new-price
                        font-size .17rem
                        font-weight 500
                        color #fe3738
                    .old-price
                        text-decoration line-through
                        height .13rem
                        font-size .1rem
                        color #999
                        margin-left .05rem
</style>
